import React from 'react';
import { Eye, Share2, Download, MoreVertical } from 'lucide-react';
import FileIcon from './FileIcon';
import { Button } from '@/components/ui/button';

const FileGrid = ({ files, selectedFiles, onFileSelect, onFolderOpen, onPreviewFile, onDownload }) => {
  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
      {files.map((file) => (
        <div
          key={file.id}
          className={`file-grid-item group relative ${
            selectedFiles.includes(file.id) ? 'ring-2 ring-primary bg-primary/5' : ''
          }`}
          onClick={() => onFileSelect(file.id)}
          onDoubleClick={() => file.type === 'folder' && onFolderOpen(file.name)}
        >
          {/* 选择框 - 提高z-index确保可点击 */}
          <div className="absolute top-2 left-2 z-20 opacity-0 group-hover:opacity-100 transition-opacity">
            <input
              type="checkbox"
              checked={selectedFiles.includes(file.id)}
              onChange={(e) => {
                e.stopPropagation();
                onFileSelect(file.id);
              }}
              className="w-4 h-4 text-primary border-material-grey-300 rounded focus:ring-primary/50 cursor-pointer"
            />
          </div>

          {/* 文件图标和信息 */}
          <div className="flex flex-col items-center text-center pt-6">
            <div className="mb-3">
              <FileIcon type={file.type} size="large" />
            </div>

            <div className="w-full">
              <p className="text-sm font-medium text-material-grey-800 truncate mb-1">
                {file.name}
              </p>
              
              <div className="text-xs text-material-grey-500">
                {file.type === 'folder' ? (
                  <span>{file.items} 个项目</span>
                ) : (
                  <span>{file.size}</span>
                )}
              </div>
              
              <div className="text-xs text-material-grey-400 mt-1">
                {file.modified}
              </div>
            </div>
          </div>

          {/* 操作按钮 - 放置在卡片中央，稍微缩小尺寸 */}
          <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/20 rounded-lg z-10">
            <div className="grid grid-cols-2 gap-2">
              {/* 第一行 */}
              <Button
                size="lg"
                variant="secondary"
                className="h-10 w-10 p-0 bg-white/90 hover:bg-white shadow-lg"
                onClick={(e) => {
                  e.stopPropagation();
                  onPreviewFile && onPreviewFile(file);
                }}
                title="预览文件"
              >
                <Eye className="w-5 h-5" />
              </Button>
              <Button
                size="lg"
                variant="secondary"
                className="h-10 w-10 p-0 bg-white/90 hover:bg-white shadow-lg"
                onClick={(e) => {
                  e.stopPropagation();
                  onDownload && onDownload(file, e);
                }}
                title="下载文件"
              >
                <Download className="w-5 h-5" />
              </Button>
              
              {/* 第二行 */}
              <Button
                size="lg"
                variant="secondary"
                className="h-10 w-10 p-0 bg-white/90 hover:bg-white shadow-lg"
                onClick={(e) => {
                  e.stopPropagation();
                  // 分享逻辑
                }}
                title="分享文件"
              >
                <Share2 className="w-5 h-5" />
              </Button>
              <Button
                size="lg"
                variant="secondary"
                className="h-10 w-10 p-0 bg-white/90 hover:bg-white shadow-lg"
                onClick={(e) => {
                  e.stopPropagation();
                  // 更多操作逻辑
                }}
                title="更多操作"
              >
                <MoreVertical className="w-5 h-5" />
              </Button>
            </div>
          </div>

          {/* 悬停效果 */}
          <div className="absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg pointer-events-none" />
        </div>
      ))}
    </div>
  );
};

export default FileGrid;
